<template>
  <!-- 页面主容器 -->
  <div style="padding: 20px; text-align: center; margin-top:45px">
    <!-- 页面标题 -->
    <h1 class="logo">获取人脸图片</h1>

    <!-- 用户输入区域：包含输入框和按钮 -->
    <div style="display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px;">
      <el-input
          v-model="input"
          placeholder="请输入用户ID"
          style="width: 340px;"
          @keyup.enter="handleKeyPress"
      />
      <el-button type="primary" @click="fetchImage" :loading="loading">
        获取图片
      </el-button>
    </div>

    <!-- 加载状态提示 -->
    <div v-if="loading" style="color: #999; margin-top: 20px;">
      正在加载...
    </div>

    <!-- 图片展示区域 -->
    <div v-else-if="imageUrl" style="margin-top: 20px;">
      <h3>人脸照片</h3>
      <img :src="imageUrl" alt="人脸图片" style="max-width: 300px; border: 1px solid #ccc; border-radius: 8px;"/>
    </div>

    <!-- 错误提示：当没有加载且有输入值时显示 -->
    <div v-else-if="!loading && input" style="color: red; margin-top: 10px;">
      ⚠图片未找到或用户ID无效
    </div>
  </div>
</template>

<script setup>
// 导入Vue的ref响应式API
import {ref} from 'vue'
// 导入获取人脸图片的API接口
import {userGetFaceInfoPic} from '@/api/user.js'
import {ElMessage} from "element-plus";



// 定义响应式变量
// 用户输入的ID
const input = ref('')
// 图片URL地址
const imageUrl = ref('')
// 加载状态标识
const loading = ref(false)

/**
 * 获取人脸图片函数
 * 根据用户ID调用API获取对应的人脸图片
 */
const fetchImage = async () => {
  // 获取并清理用户输入的ID
  const userId = input.value.trim()
  // 如果用户ID为空则直接返回
  if (!userId) return

  // 清空之前的图片URL并设置加载状态为true
  imageUrl.value = ''
  loading.value = true

  try {
    // 调用API获取图片数据
    const response = await userGetFaceInfoPic(userId)

    // 解构响应对象的状态码和数据
    const {status, data} = response

    // 验证响应是否成功且数据是有效的图片Blob对象
    if (status === 200 && data instanceof Blob && data.type.startsWith('image/')) {
      // 检查图片数据是否非空
      if (data.size > 0) {
        // 创建图片的本地URL并赋值给imageUrl
        imageUrl.value = URL.createObjectURL(data);
      } else {
        // 如果图片数据为空则显示警告消息
        ElMessage.warning('图片为空')
      }
    } else {
      // 处理可能是404错误页面的情况
      const text = await new Response(data).text()
      // 判断返回内容是否为HTML错误页面
      if (text.includes('<html') || text.includes('<!DOCTYPE')) {
        ElMessage.error('用户不存在或未注册人脸照片')
      } else {
        ElMessage.error('图片加载失败')
      }
    }
  } catch (error) {
    // 捕获并处理网络或其他异常错误
    console.error('获取图片失败:', error)
    ElMessage.error('请求失败，请检查网络或用户ID')
  } finally {
    // 无论成功与否都将加载状态设为false
    loading.value = false
  }
}

/**
 * 键盘事件处理函数
 * 当用户按下回车键时触发获取图片操作
 */
const handleKeyPress = (e) => {
  // 判断按键是否为回车键
  if (e.key === 'Enter') fetchImage()
}

</script>

<style scoped lang="scss">
  .logo {
  text-align: center;
  font-size: 50px;
  margin-bottom: 20px;
  color: #333;
}

  img {
  transition: transform 0.2s ease;

  &:hover {
  transform: scale(1.05);
}
}
</style>
